<template>
  <div class="user-list">
    <a-card>
      用户页面
      <div style="text-align: right;">
        <a-input placeholder="请输入用户名称" v-model="searchData.name" style="width: 280px;display: inline-block;margin-right: 10px;" />
        <a-input placeholder="请输入用户编号" v-model="searchData.identify" style="width: 280px;display: inline-block;margin-right: 10px;" />
        <a-button type="primary" @click="searchTableData">查询</a-button>
      </div>
    </a-card>
    <br>
    <a-card title="详细数据">
      <a-table
        row-key="id"
        :columns="columns"
        :data-source="userData"
        :pagination="paginationConfig"
        :loading="loading"
        @change="handleTablePageChange"
      >
        <template slot="age" slot-scope="text">
          {{ text === null ? '保密' : text }}
        </template>
        <template slot="sex" slot-scope="text">
          <a-tag :color="text === 1 ? 'cyan' : text === 0 ? 'red' : 'green'">{{ text === 1 ? '男' : text === 0 ? '女' : '保密' }}</a-tag>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-button type="primary" style="margin-right: 10px;" @click="editUserInfo(record)">编辑</a-button>
          <a-button type="danger" @click="deleteUserInfo(record)">删除</a-button>
        </template>
      </a-table>
    </a-card>

    <!-- 编辑框 -->
    <a-drawer
      title="编辑"
      placement="right"
      :width="480"
      :visible="dialogVisible"
      @close="cancelEdit"
    >
      <a-form-model
        ref="editForm"
        :model="formData"
        :rules="rules"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 17 }"
      >
        <a-form-model-item label="年龄" prop="age">
          <a-input v-model="formData.age"></a-input>
        </a-form-model-item>
        <a-form-model-item label="性别" prop="sex">
          <a-select v-model="formData.sex" placeholder="请选择您的性别">
            <a-select-option v-for="(item, i) in sexArr" :value="item .value" :key="i">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="联系方式" prop="phone">
          <a-input v-model="formData.phone"></a-input>
        </a-form-model-item>
        <a-form-model-item label="地址" prop="address">
          <a-input v-model="formData.address"></a-input>
        </a-form-model-item>
      </a-form-model>
      <a-form-model-item :wrapper-col="{ span: 24 }" style="text-align:center;">
        <a-button style="margin-right: 10px;" @click="cancelEdit">取消</a-button>
          <a-button type="primary" @click="confirmEdit">确认</a-button>
      </a-form-model-item>
    </a-drawer>
  </div>
</template>

<script>
import {
  getUserData,
  deleteUser,
  editUser
} from '../../api/api';

export default {
  name: 'UserList',
  data() {
    return {
      searchData: {
        name: '',
        identify: ''
      },
      dataMode: 'data',
      columns: [
        {title: '编号', dataIndex: 'identify'},
        {title: '姓名', dataIndex: 'name'},
        {title: '年龄', dataIndex: 'age', scopedSlots: {customRender: 'age'}},
        {title: '性别', dataIndex: 'sex', scopedSlots: {customRender: 'sex'}},
        {title: '联系方式', dataIndex: 'phone'},
        {title: '地址', dataIndex: 'address'},
        {title: '操作', dataIndex: 'operation', fixed: 'right', width: 180, scopedSlots: {customRender: 'operation'}},
      ],
      userData: [],
      paginationConfig: {
        total: 1,
        pageSize: 10,
        current: 1
      },
      loading: false,
      dialogVisible: false,
      formData: {
        id: '',
        age: '',
        sex: '',
        phone: '',
        address: ''
      },
      rules: {
        phone: [{required: true, trigger: 'change', message: '请输入联系方式'}],
        address: [{required: true, trigger: 'change', message: '请输入地址'}]
      },
      sexArr: [
        { label: '男', value: 1 },
        { label: '女', value: 0 },
        { label: '保密', value: 2 },
      ]
    }
  },
  methods: {
    /**
     * 获取用户数据
     */
    getUserDataList() {
      let options = {
        page: this.paginationConfig.current,
        size: this.paginationConfig.pageSize,
        name: this.searchData.name,
        identify: this.searchData.identify
      };
      this.loading = true;
      getUserData(options)
        .then(res => {
          let data = res.data;
          this.paginationConfig.total = data.total;
          this.userData = data.list;
          this.dataMode === 'search' ? this.$message.success('查询成功') : '';
        })
        .catch(err => {
          this.$message.error(err.data);
        })
        .finally(() => {
          this.loading = false;
        })
    },
    /**
     * 查询用户数据
     */
    searchTableData() {
      this.paginationConfig.current = 1;
      this.dataMode = 'search';
      this.getUserDataList();
    },
    /**
     * 切换页码
     */
    handleTablePageChange(pagination) {
      this.dataType = 'data';
      this.paginationConfig.current = pagination.current;
      this.getUserDataList();
    },
    /**
     * 编辑用户
     */
    editUserInfo(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.formData = {
          id: row.id,
          age: row.age || '',
          sex: row.sex,
          phone: row.phone,
          address: row.address
        }
      })
    },
    /**
     * 取消编辑用户
     */
    cancelEdit() {
      this.$refs['editForm'].resetFields();
      this.dialogVisible = false;
    },
    /**
     * 确认编辑用户
     */
    confirmEdit() {
      this.dataMode = 'data';
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          editUser(this.formData)
            .then(res => {
              this.$message.success('编辑成功');
              this.getUserDataList();
              this.dialogVisible = false;
            })
            .catch(err => {
              this.$message.error('编辑失败');
            });
        } else {
          console.log('error submit');
          return false;
        }
      })
    },
    /**
     * 删除用户
     */
    deleteUserInfo(row) {
      this.dataMode = 'data';
      deleteUser({ id: row.id })
        .then(res => {
          this.$message.success('删除成功');
        })
        .catch(err => {
          this.$message.error(err.data);
        })
        .finally(() => {
          this.getUserDataList();
        })
    },
    /**
     * 关闭drawer的回调
     */
    drawerClose() {
      this.dialogVisible = false;
    }
  },
  mounted() {
    this.getUserDataList();
  }
}
</script>

<style>

</style>